<template>
	<view class="register">
		<view class="registerImg">
			<image src="../../static/img/login/registerIcon@2x.png"></image>
		</view>
		
		<view class="phone">
			<view class="phoneNumber">手机号</view>
			<input type="text" v-model="phone" placeholder="请输入手机号" @blur="verifyMobile" />
		</view>
		<view class="phone">
			<view class="phoneNumber">验证码</view>
			<input type="text" v-model="code" placeholder="请输入验证码" @blur="codeBlur">
			<text class="button" @click="sendCode">{{codeMsg}}</text>
		</view>
		<view class="phone">
			<view class="phoneNumber">密码</view>
			<input type="password" v-if="passShow" v-model="password" placeholder="不少于6位数字和字母组合" @blur="passwordBlur">
			<input type="type" v-else  v-model="password"  placeholder="不少于6位数字和字母组合" @blur="passwordBlur">
			<image src="../../static/img/login/passswordNotVisible@2x.png" v-if="passShow" @click="passShow = false"></image>
			<image src="../../static/img/login/passwordVisible@2x.png" v-else @click="passShow = true"></image>
		</view>
		
		<view class="agreement" @click="remember = !remember">
			<image src="../../static/img/login/noChecked@2x.png" v-if="remember == false"></image>
			<image src="../../static/img/login/checkedOn@2x.png" v-else></image>
			 勾选同意和雅医策<text>《用户服务协议》</text><text>《隐私政策》</text>
		</view>
		
		<view class="registerButton" @click="register">注册</view>
		<!-- <view class="agreement" >
			<checkbox-group>
				<label>
					<checkbox value="psw" :checked="remember" :class="remember == false ? '' : 'changeStyle'" color="#FFFFFF" style="transform:scale(0.7)" />
	                勾选同意和雅医策<text>《用户服务协议》</text><text>《隐私政策》</text>
				</label>
			</checkbox-group>
		</view> -->
		<u-modal v-model="showModal" :content="showContent"></u-modal>
	</view>
</template>

<script src="@/static/js/login/registe.js"></script>
<style lang="scss" scoped>
	.register {
		width: 750upx;
		padding: 0 77upx;
		box-sizing: border-box;
		
		.registerImg {
			width:126upx;
			height: 66upx;
			margin: 60upx 0 8upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.phone {
			position: relative;
			height: 168upx;
			.phoneNumber {
				color: #333333;
				font-size: 32upx;
				padding: 53upx 0 12upx;
				font-weight: bold;
			}
			input {				
				padding-bottom: 23upx;
				font-size: 28upx;
				flex: 1;
				border-bottom: 1upx solid #D6D6D6;
			}
			image{
				position: absolute;
				right: 12upx;
				bottom: 24upx;
				width: 30upx;
				height: 30upx;
			}
			.button {
				position: absolute;
				right: 0;
				bottom: 24upx;
				width: 160upx;
				font-size: 30upx;
				color: #04BFAB;
				text-align: right;
			}
			.registerCode {
				display: flex;
				input {
					padding-bottom: 23upx;
					font-size: 28upx;
					flex: 1;
					border-bottom: 1upx solid #D6D6D6;
				}
				button {
					background: #EDFFF4;
					width: 154upx;
					height: 50upx;
					border-radius: 26upx;
					color: #38CB97;
					font-size: 24upx;
					line-height: 50upx;
					text-align: center;
					margin-left: 24upx;
					padding: 0;
				}
			}		
		}
		.registerButton {
			width: 586upx;
			height: 90upx;
			line-height: 90upx;
			margin: 85upx auto 31upx;
			background-color: #04BFAB;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
			border-radius: 45upx;
		}
		.agreement {
			margin: 23upx auto;
			color: #666666;
			font-size: 22upx;
			image {
				width: 22upx;
				height: 22upx;
				margin-right: 11upx;
			}
			text {
				color: #04BFAB;
			}
		}
	}
</style>
